WLX

It allows to use Wolfram Language XML in your cell. It comes handy when making a a complex cell structure or stylizing it using the power of HTML/CSS/JS.

Embed figures into a custom layout

Plot a figure into a symbol starting from the capital letter

Figure = Plot[Sinc[5x], {x,-5,5}]

then type in a new cell

.wlx

<div>
  <style>
    @keyframes tilt-shaking {
      0% { transform: rotate(0deg); }
      25% { transform: rotate(5deg); }
      50% { transform: rotate(0eg); }
      75% { transform: rotate(-5deg); }
      100% { transform: rotate(0deg); }
    }
  </style>
  <div style="animation: tilt-shaking 0.35s infinite">
    <Figure/>
  </div>
</div>

Then you plot will shake infinitely ;)

Making components

Let us define some hybrid WL function

.wlx

Heading[Text_, OptionPattern[]] := With[{color = OptionValue["Color"]},
	<h2 style="color: {color}"><Text/></h2>;
]

Options[Heading] = {"Color"->"black"}

then we can use it in our layout

.wlx

<Heading Color={"blue"}>
  Hello World!
</Heading>

tip

Utilize the power of WLX while making Slides

All WL expressions are accessible from there as well

.wlx

GetTime := TextString[Now]

<GetTime/>

Two-columns layout using Flexbox

You can fine-tune the layout, since you are dealing with pure HTML and CSS. For example, here we have a slider and a plot aligned to a row

.wlx

Module[{Slider = InputRange[0.1,1,0.1,0.5], Figure, lines},
  EventHandler[Slider, Function[data, lines = {#, Sinc[#/data]}& /@ Range[-5,5,0.1]]];
  Slider // EventFire;

  Figure = Graphics[Line[lines // Offload], ImageSize->350];

  <div style="display: flex">
    <div><Slider/></div>
    <div><Figure/></div>
  </div>
]